<script setup lang="ts">
const fileNames = ref<any>([]);
const getFiles = async () => {
  const res = await $fetch('/api/getFiles', {
    method: 'get'
  });
  fileNames.value = res;
};
await getFiles();
// console.log(fileNames);
const keysTitle = computed(() => {
  return fileNames.value.reduce((p: any, c:any) => {
    const titleArr = c.split('-');
    if (titleArr.length > 1) {
      const title = titleArr[0];
      let myItem = p.find((item: any) => item.title === title);

      if (!myItem) {
        myItem = {
          title,
          children: []
        }
        p.unshift(myItem);
      }
      myItem.children.push({
        title: titleArr[1].slice(0, -3),
        path: c.slice(0, -3)
      });
    } else {
      let myItem = p.find((item: any) => item.title === '其他');
      if (!myItem) {
        myItem = {
          title: '其他',
          children: []
        }
        p.push(myItem);
      }
      myItem.children.push({
        title: c.slice(0, -3),
        path: c.slice(0, -3)
      });
    }
    return p
  }, [])
});

const mdName = ref('');
const addFn = async () => {
  if (mdName.value) {
    const res = await $fetch('/api/addMd', {
      method: 'get',
      query: {
        name: mdName.value
      }
    });
    if (res) {
      await getFiles();
    }
  }
};

const deleteFn = (name: string) => {
  $fetch('/api/deleteMd', {
    method: 'get',
    query: {
      name
    }
  }).then(() => {
    getFiles();
  });
};

const selectGroup = ref(0);
const selectDoc = ref(0);
</script>

<template>
  <Head>
    <Title>路阳文档</Title>
  </Head>
  <div class="relative min-h-screen flex">
    <img src="/images/10.jpg" class="absolute inset-0 w-full h-full object-cover">
    <div class="w-96 border-gray-50 relative">
      <div class="bg-white/95 h-screen overflow-auto flex flex-col flex-auto">
        <div class="p-2 border-b-2 border-transparent border-b-gray-300 border-solid">
          <form class="sm:flex sm:items-center">
            <div class="w-full">
              <input v-model="mdName" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6" placeholder="输入文档名字" />
            </div>
            <button class="inline-flex w-full items-center justify-center rounded-md bg-blue-600 px-6 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 sm:ml-3 sm:mt-0 sm:w-auto cursor-pointer whitespace-nowrap" @click="addFn">添加</button>
          </form>
        </div>
        <div class="flex flex-auto items-stretch">
          <div class="flex-1 border-r-2 border-transparent border-r-gray-200 border-solid box-border">
            <h4 v-for="(item, key) in keysTitle" :key="key" class="p-2 text-base text-gray-600 font-normal flex items-center border-b-2 border-transparent border-b-gray-200 border-solid m-0 cursor-pointer" :class="{'bg-gray-300': selectGroup === key}" @click="selectGroup=key, selectDoc=0"><Icon name="material-symbols:folder-open-rounded" /><span class="ml-2">{{ item.title }}</span></h4>
          </div>
          <div class="flex-1 box-border border-2 border-solid border-gray-200">
            <h4 v-for="(item, key) in keysTitle[selectGroup].children" :key="key" class="p-2 text-base text-gray-600 font-normal flex items-center border-b-2 border-transparent border-b-gray-200 border-solid m-0 cursor-pointer" :class="{'bg-gray-300': selectDoc === key}" @click="selectDoc=key"><Icon name="skill-icons:markdown-light" /><span class="ml-2">{{ item.title }}</span></h4>
          </div>
        </div>
      </div>
    </div>
    <Doc :name="keysTitle[selectGroup].children[selectDoc].path"></Doc>
  </div>
</template>